<template>
  <div ref="pieRef" id="pie"></div>
</template>

<script setup>
import { ref, nextTick, watch } from "vue";
import { getResize } from "@/utils/index.ts";
import * as echarts from "echarts";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

// ref
const pieRef = ref(null);

const onPie = async () => {
  const myChart =
    echarts.getInstanceByDom(pieRef.value) || echarts.init(pieRef.value);
  const { data } = props;
  // const value = Math.round(parseFloat(data?.value || 0) * 100) / 100
  const value = Number(Number(data?.value).toFixed(1));
  const option = {
    title: [
      {
        text: `${value}%`,
        subtext: "良率",
        top: "center", // 垂直居中
        left: "center", // 水平居中
        textStyle: {
          color: "#fff",
          fontSize: 16,
        },
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
    ],
    series: [
      // 大圆环
      {
        type: "pie",
        radius: ["95%", "75%"],
        center: ["50%", "55%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 1,
        label: {
          position: "center",
        },
        data: [
          {
            value: value,
            itemStyle: {
              color: "#3b8cef",
            },
          },
          {
            value: 100 - value,
            name: "",
            label: {
              show: false,
            },
            itemStyle: {
              color: "transparent",
            },
          },
        ],
      },
      // 小圆环
      {
        type: "pie",
        // radius: ['96%', '84%'],
        radius: ["89%", "80%"],
        center: ["50%", "55%"],
        silent: true,
        clockwise: true,
        z: 0,
        zlevel: 0,
        label: {
          position: "center",
        },
        data: [
          {
            value: 100,
            name: "",
            itemStyle: {
              color: "#c2cbcf",
            },
          },
        ],
      },
    ],
  };
  getResize(option, myChart);
};

watch(
  () => props.data,
  (newVal) => {
    nextTick(() => {
      if (pieRef.value) {
        onPie();
      }
    });
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
#pie {
  width: 100%;
  height: 125px;
}
</style>
